<template>
  <div class="content">
    <div class="coins-filter">
      <h3>{{defaultText}}{{'TRADE'|t}}</h3>
      <div class="coins-select" @click.stop.prevent="showBool=!showBool">
        <div class="coins-select-item buy" v-if="defaultType==1">
          <i class="icon"></i>
          <span>{{'BUY_IN'|t}}</span>
        </div>
        <div class="coins-select-item sell" v-if="defaultType==2">
          <i class="icon"></i>
          <span>{{'SELL_OUT'|t}}</span>
        </div>
        <div class="filter-select-position" v-show="showBool">
          <div class="coins-select-item buy" @click="toggleType(1)">
            <i class="icon"></i>
            <span>{{'BUY_IN'|t}}</span>
          </div>
          <div class="coins-select-item sell" @click="toggleType(2)">
            <i class="icon"></i>
            <span>{{'SELL_OUT'|t}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="form" v-show="defaultType=='2'">
      <zx-form-group :title="$t('SELL_OUT')+defaultText">
        <zx-input v-model="sellForm.prices" disabled place='' class="price-input c-success">
          <span class="form-text-price">{{'SELL_OUT_PRICE'|t}}（¥）</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('SELL_OUT_NUM')">
        <zx-input v-model="sellForm.sellNum" :place='$t("SELL_OUT_NUM_PLACE")' type='number' ref='sellNum' :rules="rules.sellNum">
          <span class="form-text c-primary">{{defaultText}}</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('PAGEMENT_METHODS')" class="boxShadow">
        <zx-select v-model='sellForm.payType' :place="$t('CHOICE_RECEIVABLE')" ref='payType' :rules="rules.payType">
          <zx-option value="1" v-show="userStatus.bankState=='1'">{{'BANKTRANSFER'|t}}</zx-option>
          <zx-option value="2" v-show="userStatus.alipayState=='1'">{{'ALI_PAY'|t}}</zx-option>
          <zx-option value="3" v-show="userStatus.weChatState=='1'">{{'WECHATPAY'|t}}</zx-option>
        </zx-select>
      </zx-form-group>
      <zx-form-group :title="$t('BANKS')" class="boxShadow" v-if="sellForm.payType=='1'">
        <zx-select v-model='sellForm.payId' :place="$t('BANKS_SELECT_PLACE')" ref='payId' :rules="rules.payId">
          <zx-option :value="item.id" v-for="(item,key) of bankList" :key='key'>{{item.bank_num}}{{item.bank}}</zx-option>
        </zx-select>
      </zx-form-group>
      <zx-form-group :title="$t('ALIPAYS')" v-if="sellForm.payType=='2'">
        <zx-input v-model="alipayccount" :place="$t('ALIPAY_PLACE')" type='text' disabled>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('WECHAT')" v-if="sellForm.payType=='3'">
        <zx-input v-model="wechatAccount" :place="$t('WECHAT_PLACE')" type='text' disabled>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('USER_TRADE_PASS')">
        <zx-input v-model="sellForm.sellPass" :place="$t('USER_TRADE_PASS_PLACE')" type='password' ref='sellPass' :rules="rules.sellPass">
        </zx-input>
      </zx-form-group>
      <div class="able-text">{{'AVAILABLE'|t}} CNY
        <span class="c-primary">{{sellForm.prices*sellForm.sellNum|Fixed(2)}}</span>
      </div>
      <zx-form-group>
        <input type="submit" class="submit-btn mt-20  success-btn radius" :value="$t('SELL_IMMEDIATELYS')" @click="submitFn('sellForm','sell')">
      </zx-form-group>
    </div>
    <div class="form" v-show="defaultType=='1'">
      <zx-form-group :title="$t('BUY_IN')+defaultText">
        <zx-input v-model="buyForm.prices" disabled :place='$t("BUY_PRICE")+"（¥）"' class="price-input c-red">
          <span class="form-text-price">{{'BUY_PRICE'|t}}（¥）</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('BUY_IN_NUM')">
        <zx-input v-model="buyForm.buyNum" :place='$t("BUY_IN_NUM_PLACE")' type='number' ref='buyNum' :rules="rules.buyNum">
          <span class="form-text c-primary">{{defaultText}}</span>
        </zx-input>
      </zx-form-group>
      <zx-form-group :title="$t('USER_TRADE_PASS')">
        <zx-input v-model="buyForm.buyPass" :place='$t("USER_TRADE_PASS_PLACE")' type='password' ref='buyPass' :rules="rules.buyPass">
        </zx-input>
      </zx-form-group>
      <div class="able-text">{{$t('AVAILABLE')}} CNY
        <span class="c-primary">{{buyForm.prices*buyForm.buyNum|Fixed}}</span>
      </div>
      <zx-form-group>
        <input type="submit" class="submit-btn mt-20  radius red-btn" :value="$t('BUY_IMMEDIATELY')" @click="submitFn('buyForm','buy')">
      </zx-form-group>
    </div>
    <div class="trade-text-wrap">
      <div class="trade-text">
        <div class="trade-title">{{'TRADE_NOTICE'|t}}</div>
        <div class="trade-desc">
          {{'TRADE_DESC1'|t}}
          <br> {{'TRADE_DESC2'|t}}
          <br> {{'TRADE_DESC3'|t}}
          <br> {{'TRADE_DESC4'|t}}
          <br> {{'TRADE_DESC5'|t}}
          <br> {{'TRADE_DESC6'|t}}
        </div>
      </div>
    </div>
    <div class="success-trade-wrap" v-show='showMaskBool'>
      <div class="success-trade-mask" @click.stop.prevent='showMaskBool=!showMaskBool'></div>
      <div class="trade-mask-cont">
        <p>{{'ACCOUNT_NAME'|t}}：{{successInfo.bankUserName}}</p>
        <p>{{'ACCOUNT'|t}}：{{successInfo.payNumber}}{{successInfo.payName}}</p>
        <p>{{'ORDER_NUMBER'|t}}：{{successInfo.tradeId}}</p>
        <p>{{'NOTES'|t}}：{{successInfo.remark}}</p>
        <p>{{'ADDRESS'|t}}：{{successInfo.bankAddress}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { Form, Func, Auth, Rules } from '@/providers';
  import { C2c, Coins } from '@/services';
  import { mapGetters } from 'vuex';
  export default {
    data() {
      return {
        showBool: false,
        showMaskBool: false,
        defaultType: 2,
        wechatAccount: Auth.getItem('weixin'),
        alipayccount: Auth.getItem('alipay'),
        successInfo: {
          attr1: null,
          attr2: null,
          attr3: null,
          bankAddress: '',
          bankUserName: '',
          beginDate: '',
          beginDateStr: null,
          coinType: 0,
          endDate: null,
          id: 0,
          payName: '',
          payNumber: '',
          payType: 0,
          price: 6,
          reason: null,
          remark: '',
          size: null,
          state: 0,
          tradeId: '',
          tradeNumber: 0,
          tradeType: 0,
          userId: 0
        },
        sellForm: {
          prices: '0.00',
          sellNum: '',
          payType: '',
          payId: '',
          sellPass: ''
        },
        buyForm: {
          prices: '0.00',
          buyNum: '',
          buyPass: ''
        },
        rules: Rules,
        defaultText: '',
        buyPrice: 0,
        sellPrice: 0,
        bankList: []
      };
    },
    watch: {
      '$route.query.type'(val) {
        this.defaultText = val == 1 ? 'USDT' : 'QC';
        this.getData();
      }
    },
    computed: {
      ...mapGetters([
        'userStatus'
      ])
    },
    methods: {
      toggleType(val) {
        this.defaultType = val;
        Form.resetFrom(this, 'sellForm');
        Form.resetFrom(this, 'buyForm');
      },
      getData() {
        this.GetPriceRate();
        this.getBankList();
      },
      // 获取银行卡
      async getBankList() {
        try {
          let res = await C2c.GetUserBank({
            userNo: Auth.getItem('userId')
          });
          this.bankList = res.data;
          console.log(res);
        } catch (error) {
          console.log(error);
        }
      },
      // USDT、QC买入卖出价
      async GetPriceRate() {
        try {
          let res = await C2c.GetPriceRate({
            code: this.defaultText
          });
          this.buyForm.prices = res.data.buyPrice.toFixed(2);
          this.sellForm.prices = res.data.sellPrice.toFixed(2);
        } catch (error) {
          console.log(error);
        }
      },
      async submitFn(formName, type) {
        if (!Form.validataForm(this, formName)) {
          return false;
        }
        let _form = this[formName];
        let parmas;
        if (type == 'buy') {
          parmas = {
            tradeNumber: _form.buyNum,
            userNo: Auth.getItem('userId'),
            tradeType: '0',
            coinCore: this.defaultText,
            payType: '0',
            payId: '0',
            dealPwd: Func.PasswordEncrypt(_form.buyPass)
          };
        } else {
          parmas = {
            tradeNumber: _form.sellNum,
            userNo: Auth.getItem('userId'),
            tradeType: '1',
            coinCore: this.defaultText,
            payType: _form.payType,  // 支付类型 2支付宝，3微信，1银行卡（如果是买模式那么支付类型固定为2银行卡）
            payId: _form.payId ? _form.payId : '0', // 支付id， （买模式和非银行卡支付可以不传，卖模式则是官方支付信息的id）
            dealPwd: Func.PasswordEncrypt(_form.sellPass)
          };
        }
        try {
          let res = await C2c.AddApply(parmas);
          this.successInfo = res.data;
          this.showMaskBool = true;
          Form.resetFrom(this, formName);
        } catch (error) {
          console.log(error);
        }
      }
    },
    created() {
      this.queryType = this.$route.query.type;
      this.defaultText = this.queryType == 1 ? 'USDT' : 'QC';
      this.getData();
    }
  };
</script>
<style lang='scss' scoped>
  @import "../../assets/sass/c2c.scss";
  .form-text {
    position: absolute;
    right: 5px;
    bottom: 0;
  }

  .form-text-price {
    position: absolute;
    left: 5px;
    bottom: 0;
    color: white;
  }

  .able-text {
    padding: 1rem;
    font-size: 1.2rem;
  }

  .trade-text-wrap {
    padding: 1rem;
    .trade-text {
      padding: 1rem;
      background: rgba(247, 247, 247, 1);
      .trade-title {
        font-size: 1.4rem;
        color: rgba(71, 69, 70, 1);
        line-height: 3rem;
      }
      .trade-desc {
        font-size: 1.2rem;
        color: rgba(155, 155, 155, 1);
        line-height: 1.6rem;
      }
    }
  }

  .success-trade-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    .trade-mask-cont {
      background: white;
      width: 80%;
      padding: 1rem;
      border-radius: 2px;
      font-size: 1.4rem;
      z-index: 999;
      p {
        line-height: 2rem;
        color: rgba(71, 69, 70, 1);
      }
    }
  }

  .success-trade-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
  }
</style>